import { useState, useRef, useMemo, useEffect } from 'react'
import { Button, message, Progress } from 'antd'
import {useDispatch,useSelector} from 'react-redux'
import { removeBurnTask } from '../../../store/modules/taskReducer'
import LdListItem from '../../../components/LdListItem'
import './index.scss'
import bus from '../../../utils/eventBus'
import emptyPng from '../../../assets/task/empty.png'
const Queue = () => {
    const dispatch = useDispatch()
    const cloneArrayGetter = useSelector((state:any)=>state.taskReducer.burnTask)
    const paperParams = useRef([
        {
            label: "密级",
            value: "",
            model: "secretLabel",
        },
        { label: "张数", value: "", model: "paperSize" },
        { label: "大小", value: "", model: "fileSizeLabel" },
        { label: "类型", value: "", model: "diskTypeLabel" },
    ])
    const burnSubmitNtFinished = (res: any) => {
        if (res.code === 200) {
            dispatch(removeBurnTask())
        } else {
            message.error(res.message);
            dispatch(removeBurnTask())
        }
    }
    const handleOpen = () => {
        bus.emit('burnWindow')
    }
    useEffect(() => {
        bus.addListener("burnSubmitNtFinished", burnSubmitNtFinished);
    }, [])
    useEffect(() => {
        if (cloneArrayGetter.length === 0) {
            bus.emit("setItemCountDown");
        } else {
            bus.emit("stopCountDown");
        }
    }, [cloneArrayGetter])
    useEffect(() => {
        return () => {
            bus.removeListener("burnSubmitNtFinished", burnSubmitNtFinished);
        }
    }, [])
    return (
        <>
            <div className="printFile">
                <div className='flex-end'>
                    <Button onClick={handleOpen} disabled={cloneArrayGetter.length ? true : false} type="primary">我要刻录</Button>
                </div>
                <div className="print-list mt-15">
                    {
                        cloneArrayGetter.length ?
                            <>
                                {
                                    cloneArrayGetter.map((item: any, index: number) => {
                                        return (
                                            <LdListItem index={index + 1} key={item.replyId} taskItem={item} paperParams={paperParams.current}
                                                mode="burn" showStatus={false}>
                                                <div slot="progress">
                                                    <Progress strokeColor={{ "0": '#108ee9', "100%": '#87d068' }} percent={item.progress} showInfo={false}></Progress>
                                                </div>
                                            </LdListItem>
                                        )
                                    })
                                }
                            </>
                            :
                            <div className="empty-content flex-center align-center">
                                <div>
                                    <img draggable={false} src={emptyPng} width="238px" />
                                    <div style={{
                                        width: '100%',
                                        textAlign: 'center',
                                        color: 'rgba(137, 147, 154, 100)',
                                        fontSize: '14px'
                                    }} className="mt-10">
                                        暂无刻录队列
                                    </div>
                                </div>
                            </div>
                    }
                </div>
            </div>
        </>
    )
}
export default Queue